<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>狂背英语</title>
  <link rel="stylesheet" href="./assets/css/common.css">
  <link rel="stylesheet" href="./assets/css/index.css">
</head>

<body>
  <!-- 按钮特效 -->
  <div class="toggleWrapper">
    <input type="checkbox" class="dn" id="dn">
    <label for="dn" class="toggle">
      <span class="toggle__handler">
        <span class="crater crater--1"></span>
        <span class="crater crater--2"></span>
        <span class="crater crater--3"></span>
      </span>
      <span class="star star--1"></span>
      <span class="star star--2"></span>
      <span class="star star--3"></span>
      <span class="star star--4"></span>
      <span class="star star--5"></span>
      <span class="star star--6"></span>
    </label>
  </div>
  <!-- 实现一个单词选项功能，显示出单词，然后输入框输入内容之后与target匹配，如果匹配成功，就跳转到下一个单词，匹配不成功。就不跳转。 -->
  <div class="card">
    <div class="en">英文</div>
    <div class="ch">中文</div>
    <input class="input" name="text" type="text" placeholder="word">
    <button class="btn" style="display: none;">确定</button>
  </div>
  <script src="./assets/js/data.js"></script>
  <script>
    /**
     * 先进行读英语单词，读出来之后再可以输入单词，输入单词匹配之后就可以跳转了。
     * 这个过程不需要使用数据库，直接用本地的js文件就可以了。
     * 先实现功能，后实现样式。
    */
    var card = document.querySelector('.card');
    var en = document.querySelector('.en');
    var ch = document.querySelector('.ch');
    var input = document.querySelector('.input');
    var btn = document.querySelector('.btn');
    var changeTheme = document.querySelector('.dn');
    //设置防抖变量
    var timer = null;
    var id = 0;
    document.body.style.backgroundColor = "#F5F5F5";
    //改变为白天的主题
    function changeToMoring() {
      document.body.style.backgroundColor = "#F5F5F5";
      card.style.backgroundColor = "#ffffff";
      card.style.color = "#000000"
    }
    //改变为黑夜的主题
    function changeToNight() {
      document.body.style.backgroundColor = "#282c34";
      card.style.backgroundColor = "#3C4048";
      card.style.color = "#ffffff"
    }



    //防抖函数
    function debounce(func, delay) {
      clearTimeout(timer);
      timer = setTimeout(func, delay);
    }

    //页面加载完成数据的渲染以及读英语单词
    function onLoad() {
      en.innerText = lib[id].en;
      ch.innerText = lib[id].ch;
      speakText(lib[id].en);
    }
    //按钮实现匹配功能并跳转到下一个单词
    function matchAndProceedToNextWord() {
      const inputText = input.value;
      //匹配是否成功，1表示成功,0表示失败。
      if (inputText === lib[id].en) {
        id++;
        if (id === lib.length) {
          id = 0;
        }
        return 1;
      } else {
        return 0;
      };
    }
    //实现读英语的功能
    function speakText(English) {
      if ('speechSynthesis' in window) {
        const utterance = new SpeechSynthesisUtterance(English);
        window.speechSynthesis.speak(utterance);
      } else {
        alert('抱歉，您的浏览器不支持 Web Speech API。');
      }
    }
    //实现点击和回车事件绑定
    function toEvent() {
      const result = matchAndProceedToNextWord();
      input.value = '';
      console.log(result)
      onLoad();
    }
    //函数执行顺序
    onLoad()
    //点击触发按钮
    btn.addEventListener("click", () => {
      debounce(function () {
        toEvent();
      }, 500)
    })
    //键盘监听事件
    window.addEventListener("keydown", event => {
      if (event.code === 'Enter') {
        debounce(function () {
          toEvent();
        }, 500)
      }
    });
    //实现监听切换主题按钮的事件
    changeTheme.addEventListener('change', (event) => {
      if (!event.target.checked) {
        changeToMoring();
      } else {
        changeToNight();
      }
    });
  </script>
  <!-- 可以自己部署到服务器上面：https://github.com/stevenjoezhang/live2d-widget 但是需要node环境 -->
  <script src="https://l2dwidget.js.org/lib/L2Dwidget.min.js"></script>
  <script>
    var jsonModel = [
      "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json"
    ];
    L2Dwidget.init({
      "model": {
        "jsonPath": jsonModel[Math.floor(Math.random() * (jsonModel.length - 1))],
        "scale": 1
      },
      "display": {
        "position": "right", // 位置left、right
        "width": 150, // 宽度 
        "height": 180, // 高度
        "hOffset": 10, // 横向边距
        "vOffset": 0 // 众向边距
      },
      "mobile": {
        "show": false // 手机是否显示
      },
    });
  </script>
  
</body>

</html>